<template>
  <!--  首页轮播图-->
  <div class="carousel">
    <el-carousel height="350px" class="carousel">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="../../assets/images/web-banner-1.png" alt="">
      </el-carousel-item>
    </el-carousel>

  </div>
  <!--  搜索建议框-->
  <div class="search">
    <el-autocomplete
        v-model="keyword"
        :fetch-suggestions="querySearch"
        :trigger-on-focus="false"
        clearable
        class="inline-input w-50"
        placeholder="请输入医院名称"
        @select="handleSelect"
    />
    <el-button type="primary" :icon="Search">
    </el-button>
  </div>
  <!--  展示医院结构-->
  <el-row :gutter="20">
    <el-col :span="20">
      <div class="card_content">
        <h1>医院</h1>
        <div class="level">
          <span>等级：</span>
          <ul>
            <li @click="levelHandler(-1,'')" :class="{active:levelFlog===-1}">全部</li>
            <li v-for="(item,index) in level" :key="item.id" @click="levelHandler(index,item.value)"
                :class="{active:levelFlog===index}">{{ item.name }}
            </li>
          </ul>
        </div>
        <div class="region">
          <span>地区：</span>
          <ul>
            <li :class="{active:regionFlog===-1}" @click="regionHandler(-1,'')">全部</li>
            <li v-for="(item,index) in region" :key="item.id" :class="{active:regionFlog===index}"
                @click="regionHandler(index,item.value)">{{ item.name }}
            </li>
          </ul>
        </div>
        <div class="card" v-if="hospitalArr.length > 0">
          <el-card class="box-card" shadow="hover" v-for="item in hospitalArr" :key="item.id" @click="goDetail(item.hoscode)">
            <div class="content">
              <div class="left">
                <div class="top">{{ item.hosname }}</div>
                <div class="bottom">
                  <div class="detail">
                    <svg t="1690716414405" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2325" width="16" height="16">
                      <path
                          d="M542.6688 85.333333c-74.325333 0-133.307733 58.026667-133.307733 133.393067 0 43.861333-37.922133 113.578667-80.093867 148.4288-30.754133 25.412267-98.013867 45.226667-200.055467 56.661333l-3.413333 0.4608a68.266667 68.266667 0 0 0-57.258667 67.328l-0.238933 374.442667-0.0512 0.256c-0.170667 1.194667-0.1024 2.269867 0.017067 3.822933l0.085333 3.413334a68.2496 68.2496 0 0 0 68.1984 64.853333l612.096 0.136533 0.341333 0.0512c0.836267 0.0512 1.6896 0.085333 2.542934 0.085334 25.463467 0 50.568533-7.168 72.430933-21.026134l4.693333-3.072a133.205333 133.205333 0 0 0 40.772267-45.2096l1.604267-3.072-1.6384 2.5088c4.642133-6.5024 8.021333-13.824 10.103466-21.6064l74.069334-326.894933 0.768-3.242667c0.9216-4.488533 1.365333-9.557333 1.2288-14.728533l-0.068267-1.092267-0.119467 2.474667a132.949333 132.949333 0 0 0-20.206933-81.271467l-2.6112-4.061866c-23.125333-34.577067-61.013333-56.081067-102.2976-59.204267l-2.679467-0.170667-1.024-0.136533a61.969067 61.969067 0 0 0-7.560533-0.4608l-145.442133-0.1024 1.8432-8.8576a393.728 393.728 0 0 0 7.185066-75.025067c0-28.501333-3.242667-56.951467-9.472-85.333333l-0.699733-2.696533a34.116267 34.116267 0 0 0-0.9216-2.628267l-0.477867-1.041067-0.682666-2.4576A133.4272 133.4272 0 0 0 542.6688 85.333333z m0 68.266667a65.160533 65.160533 0 0 1 62.5664 47.274667l1.553067 5.922133 0.6144 1.672533-0.955734-4.727466a323.703467 323.703467 0 0 1-10.120533 177.425066l-0.750933 2.389334a34.133333 34.133333 0 0 0 32.938666 42.973866L818.670933 426.666667l1.604267 0.238933 2.423467 0.187733a66.986667 66.986667 0 0 1 54.6304 31.573334 64.853333 64.853333 0 0 1 10.154666 35.84l-0.273066 6.877866 0.1024 2.525867-73.796267 325.700267-1.1264 1.7408-1.245867 2.269866a65.314133 65.314133 0 0 1-23.552 26.2656l-3.720533 2.2016a66.833067 66.833067 0 0 1-28.125867 8.192l-2.133333 0.0512-2.048-0.068266L136.533333 870.126933l0.256-378.4704c114.210133-12.782933 192.273067-35.7888 235.946667-71.867733 55.415467-45.806933 102.3488-130.594133 104.789333-195.822933l0.085334-5.239467c0-37.410133 28.16-65.1264 65.041066-65.1264z"
                          fill="#444444" p-id="2326"></path>
                      <path
                          d="M290.133333 580.266667v187.733333a34.133333 34.133333 0 0 1-34.133333 34.133333h-34.133333V546.133333h34.133333a34.133333 34.133333 0 0 1 34.133333 34.133334z"
                          fill="#00B386" p-id="2327"></path>
                    </svg>
                    <span>{{ item.param.hostypeString }}</span>
                  </div>
                  <div class="time">
                    <el-icon>
                      <Clock/>
                    </el-icon>
                    <span>每天{{ item.bookingRule.releaseTime }}放号</span>
                  </div>
                </div>
              </div>
              <div class="right"><img :src="`data:image/jpeg;base64,${item.logoData}`" alt=""></div>
            </div>
          </el-card>
        </div>
        <el-empty description="暂无" v-else/>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="notice">
        <div class="department">
          <div class="top">
            <h3>常见科室</h3>
            <a href="#">全部 ></a>
          </div>
          <div class="content">
            <ul>
              <li>神经内科</li>
              <li>消化内科</li>
              <li>呼吸内科</li>
              <li>内科</li>
              <li>口腔科</li>
              <li>妇科</li>
              <li>产科</li>
              <li>儿科</li>
            </ul>
          </div>
        </div>
        <div class="platformNotice">
          <div class="top">
            <h3>平台公告</h3>
            <a href="#">全部 ></a>
          </div>
          <div class="content">
            <ul>
              <li>关于延长北京大学国际医院放假的通知</li>
              <li>北京中医药大学东方医院部分科室医生门诊医</li>
              <li>武警总医院号源暂停更新通知</li>
            </ul>
          </div>
        </div>
        <div class="discontinuationNotice">
          <div class="top">
            <h3>停诊公告</h3>
            <a href="#">全部 ></a>
          </div>
          <div class="content">
            <ul>
              <li>中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告</li>
              <li>首都医科大学附属北京潞河医院老年医学科门诊停诊公告</li>
              <li>中日友好医院中西医结合心内科门诊停诊公告</li>
            </ul>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <!--  分页器-->
  <div class="pagination">
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          disabled="disabled"
          background="background"
          layout="prev, pager, next, jumper,total"
          :total="hospitalTotal"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>

import {Clock, Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {reqHospitalFindByName, reqHospitalLevelAndRegion, reqHospitalPage} from "@/api/home";
import {ElMessage} from "element-plus";
import {Content, HospitalResponseData} from "@/api/home/type";
import {useRouter} from "vue-router";

let pageNo = ref<number>(1);    //当前页
let pageSize = ref<number>(10);  //一页显示的数据量
let hospitalArr = ref<Content[]>([]);   // 医院信息
let hospitalTotal = ref<number>(0);  //医院总条数
let region = ref<[]>([]); //地区信息
let level = ref<[]>([]); //医院等级信息
let levelFlog = ref<number>(-1);
let regionFlog = ref<number>(-1);
let hostype = ref<string>('');
let districtCode = ref<string>('');
let keyword = ref<string>(''); //搜索框关键字
let $router = useRouter();  //路由对象


// 获取医院信息
let getHospitalPage = async () => {
  let result = await reqHospitalPage(pageNo.value, pageSize.value, hostype.value, districtCode.value);
  if (result.code == 200) {
    hospitalArr.value = result.data.content;
    hospitalTotal.value = result.data.totalElements;
  } else {
    throw Error(result.message)
  }
}

// 处理页数变化
let handleCurrentChange = () => {
  getHospitalPage();
}

// 请求医院等级和地区
let getHospitalLevelAndRegion = async (dictCode: string) => {
  let result: any = await reqHospitalLevelAndRegion(dictCode);
  if (result.code == 200) {
    dictCode === 'hostype' ? level.value = result.data : region.value = result.data;
  } else {
    throw Error(result.message)
  }
}

// 处理等级点击事件
let levelHandler = (index: number, value: string) => {
  //  判断是否重复点击
  if (levelFlog.value != index) {
    levelFlog.value = index;
    hostype.value = value;
    getHospitalPage();
  }


}

//处理地区点击事件
let regionHandler = (index: number, value: string) => {
  //  判断是否重复点击
  if (regionFlog.value != index) {
    regionFlog.value = index;
    districtCode.value = value;
    getHospitalPage();
  }
}

// 处理搜索框输入
let querySearch = async (keyword: string, cb: any) => {
  let result = await reqHospitalFindByName(keyword);
  console.log(result);
  if (result.code == 200) {
    let showData = result.data.map(item => {
      return {
        value: item.hosname,
        hoscode: item.hoscode
      }
    })
    cb(showData)
  } else {
    throw Error(result.message)
  }

}

// 处理点击搜索建议项
let handleSelect = item => {
  $router.push({path: '/hospital/reservation',query:{hoscode:item.hoscode}})
}

// 点击医院卡片时跳转到hospital/reservation路由
let goDetail = (hoscode:string) => {
  $router.push({path:'/hospital/reservation',query:{hoscode}});
}


onMounted(() => {
  try {
    getHospitalPage();
    getHospitalLevelAndRegion('hostype');
    getHospitalLevelAndRegion('beijin')
  } catch (e) {
    ElMessage(e.message)
  }
})


</script>

<style scoped lang="less">
.carousel {
  img {
    width: 100%;
    height: 350px;
  }
}

.search {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;

  :deep(.el-autocomplete) {
    width: 600px;
  }

  :deep(.el-button) {
    margin-left: 8px;
  }
}

h1 {
  margin: 10px 0;
  color: #7f7f7f;
  font-weight: bold;
}

.level {
  display: flex;
  margin-bottom: 10px;
  color: #7f7f7f;


  span {
    margin-right: 5px;
    width: 60px;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;

    li {
      margin-right: 10px;

      &.active {
        color: #55a6fe;
      }

      &:hover {
        color: #55a6fe;
      }

    }
  }
}

.region {
  display: flex;
  color: #7f7f7f;


  span {
    margin-right: 5px;
    width: 75px;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;

    li {
      &.active {
        color: #55a6fe;
      }

      margin-right: 10px;

      &:hover {
        color: #55a6fe;
      }

    }

  }
}

.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .box-card {
    display: flex;
    margin: 10px 0;
    width: 48%;
    cursor: pointer;

    :deep(.el-card__body) {
      width: 100%;
    }

    .content {
      display: flex;
      justify-content: space-between;

      .left {
        width: 60%;

        .bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;

          .detail, .time {
            display: flex;
            align-items: center;

          }

          span {
            margin-left: 5px;
          }
        }
      }

      .right {
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }

}



.pagination {
  margin-bottom: 10px;
}

.notice {
  display: flex;
  flex-direction: column;
  color: #7f7f7f;

  .department {

  }

  .department, .platformNotice, .discontinuationNotice {
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }

  .department {
    .content {
      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
          width: 40%;
        }
      }
    }
  }

  .platformNotice {
    margin-top: 10px;

    .content {
      ul {
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .discontinuationNotice {
    margin-top: 10px;

    .content {
      ul {
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

}

</style>